<template>
	<div class="flex">
		<MkPanel title="复核血型">
			<div class="edit-card-content">
				<span :class="classABO"> {{ model.fuHeABO }} </span>
				<span v-if="model.fuHeRhD == '-'" style="">
					<span class="rhd-yingxing"> Rh(D)阴性 </span>
				</span>
				<span v-else> {{ model.fuHeRhD }}</span>
			</div>
		</MkPanel>
		<MkPanel title="抗体筛查">
			<div class="edit-card-content">
				<span class="danger" v-if="model.kangShaiJieGuo == enumCode.KangShaiJieGuo['+']">阳性</span>
				<span v-else-if="model.kangShaiJieGuo == enumCode.KangShaiJieGuo['-']">阴性</span>
				<span v-else>{{ model.kangShaiJieGuo }}</span>
			</div>
		</MkPanel>
	</div>
</template>
<script lang="ts" setup>
import { TraShenQingHuanZheInput } from '/@/api/tra/TraShenQing';
import { enumCode } from '/@/const';

// 输血申请模块--血型复核
const model = defineModel({ required: true, default: {} as TraShenQingHuanZheInput })

const classABO = computed(() => {
	switch (model.value.fuHeABO) {
		case 'A':
			return 'classA'
		case 'B':
			return 'classB'
		case 'AB':
			return 'classAB'
		case 'O':
			return 'classO'
		default:
			return ''
	}
})
</script>
<style lang="scss" scoped>
.edit-card-content {
	text-align: center;
	min-height: 40px;
	min-width: 75px;

	span {
		font-size: 2.1rem;
		font-weight: bold;
	}
}

.classA {
	color: blue;
}

.classB {
	color: orange;
}

.classO {}

.classAB {
	color: red;
}

.danger {
	color: red;
}

.rhd-yingxing {
	color: white;
	background-color: black;
	padding: 0 5px;
}
</style>
